<template>
	<view
		:selectable="selectable"
		:user-select="userSelect"
		:space="space"
		:decode="decode"
		:style="{
			color: data.color,
			fontSize: data.fontSize,
			fontWeight: data.fontWeight
		}"
	>
		<slot></slot>
	</view>
</template>

<script lang="ts">
/**
 * Text 文本组件
 * @description 基础文本容器组件，方便组件库统一暗黑模式切换时对页面文本的转换
 * @property {String} color 文本颜色
 * @property {String} fontSize 文本大小
 * @property {Number} fontWeight 文本粗细
 * @property {Boolean} selectable 文本是否可选 [App、H5、快手小程序]
 *  @value true 是
 *  @value false 否
 * @property {Boolean} userSelect 文本是否可选 [微信小程序]
 *  @value true 是
 *  @value false 否
 * @property {String} space 显示连续空格 [App、H5、微信小程序]
 * @property {Boolean} decode 是否解码 [App、H5、微信小程序]
 * @template
 * <kui-text>示例文本</kui-text>
 */
import { reactive, getCurrentInstance, defineComponent, watch } from 'vue';

const name = 'kui-text';

import TextProps from './props';

export default defineComponent({
	name,
	props: TextProps,
	options: {
		// 小程序虚拟节点设置
		virtualHost: false
	},
	setup(props) {
		const { proxy }: any = getCurrentInstance();
		const theme = proxy.$theme;
				
		const data = reactive({
			mode: theme.colors['light']['grey'][8],
			color: props.color,
			fontSize: props.size ? props.size : `${theme.size.fonts['base']}${theme.size.fontUnit}`,
			fontWeight: props.weight
		});
		
		data.color = theme.colors['light'][props.color] ? theme.colors[props.mode][props.color][5] : props.color;
		
		const changeMode = e => {
			data.color = e === 'dark' ? theme.colors['dark']['grey'][8] : theme.colors['light']['grey'][8];
		};
		
		watch(
			() => props.color,
			(newVal) => {
				data.color = newVal;
			}
		);
		
		uni.$on('changeMode', e => {
			changeMode(e);
		});
		
		return {
			data
		}
	}
});
</script>

<style scoped></style>
